<template>
	<view class="homeLayout pageBg">
		<!-- 顶部-->
		<top-nav title="优自屋"></top-nav>
		<!-- 分段器 -->
			<view class="card">
				<uni-segmented-control
				 :current="current" 
				 :values="items" 
				 @clickItem="onClickItem" 
				 styleType="button" activeColor="orange"></uni-segmented-control>
				<view class="content">
					<view class="content-one" v-show="current === 0">
						<view class="content-one-search">
<!-- 							<uni-search-bar class="uni-mt-10" radius="5" placeholder="小区/商圈/地铁站" clearButton="auto" cancelButton="none" @confirm="search" />
						<button size="mini">搜索</button> -->
						<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标" @iconClick="iconClick"></uni-easyinput>
						</view>
						
					<view class="content-one-radios">
						<radio value="r1">不限</radio>
						<radio value="r2">1居</radio>
						<radio value="r3">2居</radio>
						<radio value="r4">3居</radio>
					</view>
					<view class="content-button">
						<button class="button-10086" size="default" style="background-color: orange; color: white;">查看10086套房源</button>
						<button class="button-map">地图找房</button>
					</view>
				</view>

					<view class="content-one" v-show="current === 1">
						<view class="content-one-search">
								<uni-search-bar class="uni-mt-10" radius="5" placeholder="小区/商圈/地铁站" clearButton="auto" cancelButton="none" @confirm="search" />
							<button size="mini">搜索</button>
						</view>
						<view class="content-one-radios">
							<radio value="r1">不限</radio>
							<radio value="r2">1居</radio>
							<radio value="r3">2居</radio>
							<radio value="r4">3居</radio>
						</view>
						<view class="content-button">
							<button class="button-10086" size="default" style="background-color: orange; color: white;">查看10086套房源</button>
							<button class="button-map">地图找房</button>
						</view>
					</view>
					<view class="content-two" v-show="current === 2">
						<view class="content-one-search">
								<uni-search-bar class="uni-mt-10" radius="5" placeholder="小区/商圈/地铁站" clearButton="auto" cancelButton="none" @confirm="search" />
							<button size="mini">搜索</button>
						</view>
						<view class="content-button">
							<button class="button-10086" size="default" style="background-color: orange; color: white;">查看10086套房源</button>
							<button class="button-map">地图找房</button>
						</view>
					</view>
					<view class="content-two" v-show="current === 3">
						<view class="content-one-search">
								<uni-search-bar class="uni-mt-10" radius="5" placeholder="小区/商圈/地铁站" clearButton="auto" cancelButton="none" @confirm="search" />
							<button size="mini">搜索</button>
						</view>
						<view class="content-button">
							<button class="button-10086" size="default" style="background-color: orange; color: white;">查看10086套房源</button>
							<button class="button-map">地图找房</button>
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- 下拉框 -->
			<view class="select">
				<!-- 位置 -->
				    <uni-data-select
					style="background: rgba(255, 255, 255, 0.3);
					width: 150rpx;"
				      v-model="value"
				      :localdata="range"
				      @change="change"
					  :clear="false"
				    ></uni-data-select>
					
					<!-- 整租.户型 -->
					<uni-data-select
					style="background: rgba(255, 255, 255, 0.3);
					width: 180rpx;"
					  v-model="value1"
					  :localdata="range1"
					  @change="change"
					  :clear="false"
					></uni-data-select>
					
					<!-- 租金 -->
					<uni-data-select
					style="background: rgba(255, 255, 255, 0.3);
					width: 150rpx;"
					  v-model="value2"
					  :localdata="range2"
					  @change="change"
					  :clear="false"
					></uni-data-select>
					
					<!-- 更多 -->
					<uni-data-select
					style="background: rgba(255, 255, 255, 0.3);
					width: 150rpx;"
					  v-model="value3"
					  :localdata="range3"
					  @change="change"
					  :clear="false"
					></uni-data-select>
					
					<!-- 排序 -->
					<uni-data-select
					style="background: rgba(255, 255, 255, 0.3);
					width: 150rpx;"
					  v-model="value4"
					  :localdata="range4"
					  @change="change"
					  :clear="false"
					></uni-data-select>
			</view>
			
			<!-- 卡片 -->
			<view class="botton-card" v-for="item in 3">
				<uni-card :cover="cover" @click="onClick">
					<image slot='cover' style="width: 100%;" src="../../common/images/preview_small.webp" mode="aspectFill"></image>
					<text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
				</uni-card>	
				<uni-card :cover="cover" @click="onClick">
					<image slot='cover' style="width: 100%;" src="../../common/images/preview_small.webp" mode="aspectFill"></image>
					<text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
				</uni-card>				
			</view>
			
	</view>
</template>

<script setup>
import { ref } from 'vue';

const items = ['整租','合租/单间','公寓','短租'];
const current = ref(0);

const onClickItem = (e)=>{
	if(current.value !== e.currentIndex){
		current.value = e.currentIndex;
	}
};

/* 下拉框 */
const value=ref(1);
const range=ref([
	{value:0,text :"位置"},
	{value:1,text :"位置"},
	{value:2,text :"位置"}
]);


const value1=ref(1);
const range1=ref([
	{value:0,text :"整租.户型 "},
	{value:1,text :"整租.户型 "},
	{value:2,text :"整租.户型 "}
]);

const value2=ref(1);
const range2=ref([
	{value:0,text :"租金"},
	{value:1,text :"租金"},
	{value:2,text :"租金"}
]);

const value3=ref(1);
const range3=ref([
	{value:0,text :"更多"},
	{value:1,text :"更多"},
	{value:2,text :"更多"}
]);

const value4=ref(1);
const range4=ref([
	{value:0,text :"排序"},
	{value:1,text :"排序"},
	{value:2,text :"排序"}
]);

const change= (e)=>{
	return ;
}
</script>

<style lang="scss" scoped>
.homeLayout{
	.card{
		width: 700rpx;
		margin: 0 auto;
		background: white;
			.content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
				height: 150px;
				text-align: center;
				.content-one{
					width: 100%;
					position: relative;
					margin-top: 150rpx;
/* 					padding: 0 50rpx; */
					padding: 0 0 0 50rpx;
					.content-one-search{
						width: 100%;
						margin-top: -150rpx;
						margin-left: -50rpx;
						display: flex;
						align-items: center;
						.uni-mt-10{
							width: 500rpx;
							margin-left: 70rpx;
						}
						button{
							margin-left: -20rpx;
						}
					}
					.content-button{
						position: relative;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						.button-10086{
							width: 350rpx;
							height: 80rpx;
							margin-left: 20rpx;
						}
						.button-map{
							width: 250rpx;
							height: 80rpx;
						}
					}

				}
				
				.content-two{
					width: 100%;
					position: relative;
					margin-top: 150rpx;
					.content-one-search{
						width: 100%;
						margin-top: -150rpx;
						margin-left: -50rpx;
						display: flex;
						align-items: center;
						.uni-mt-10{
							width: 500rpx;
							margin-left: 70rpx;
						}
						button{
							margin-left: -20rpx;
						}
					}
					.content-button{
						position: relative;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						.button-10086{
							width: 350rpx;
							height: 80rpx;
							margin-left: 20rpx;
						}
						.button-map{
							width: 250rpx;
							height: 80rpx;
						}
					}
				}

			}
	}
	.select{
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}
	
	.botton-card{
		display: flex;
		align-items: center;
	}
}
</style>
